<template>
  <div class="about">
    <add @add="fun1" />
    <!-- 添加子组件 -->
    <hr />
    <list :list="list" @remove="fun2" />
    <!-- 列表子组件 -->
  </div>
</template>
<script>
import add from "../components/Add";
import list from "../components/List";
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          title: "vuejs从入门到放弃",
          price: 100,
        },
        {
          id: 2,
          title: "猪八戒背媳妇",
          price: 200,
        },
        {
          id: 3,
          title: "三国演义",
          price: 300,
        },
      ],
    };
  },
  methods: {
    fun1(val1, val2) {
      this.list.push({ id: this.list.length + 1, title: val1, price: val2 });
    },
    //添加
    fun2(i) {
      this.list.splice(i, 1);
    },
    //删除
  },
  components: {
    add,
    list,
  },
};
</script>
